<template>
    <div class="log-container">
        <div class="header">
            <div class="back-button" @click="$router.go(-1)">←</div>
            <h1>日志大屏</h1>
            <div></div>
        </div>

        <div class="metrics-area" v-if="metrics">
            <div class="metric-item">
                <div class="metric-title">总请求数</div>
                <div class="metric-value">{{ metrics.totalRequests | int }}</div>
            </div>
            <div class="metric-item">
                <div class="metric-title">平均耗时(s)</div>
                <div class="metric-value">{{ metrics.avgDuration | float2 }}</div>
            </div>
            <div class="metric-item status">
                <div class="metric-title">状态码分布</div>
                <div class="status-bars">
                    <div class="status-bar" v-for="(v, k) in metrics.statusDistribution" :key="k">
                        <span :class="'status-label status-' + k">{{ k }}</span>
                        <span class="status-count">{{ v | int }}</span>
                        <div class="status-bar-bg">
                            <div class="status-bar-fill" :style="{ width: statusBarWidth(k) }" :class="'status-' + k"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="logs-area">
            <div v-if="logs.length === 0" class="empty-tip">暂无日志数据</div>
            <div v-for="log in logs" :key="log.timestamp + log.path + log.method + log.status" class="log-card">
                <div class="log-header">
                    <span class="log-method" :class="'method-' + log.method">{{ log.method }}</span>
                    <span class="log-path">{{ log.path }}</span>
                    <span class="log-status" :class="statusClass(log.status)">{{ log.status }}</span>
                    <span class="log-time">{{ log.timestamp }}</span>
                </div>
                <div class="log-body">
                    <div class="log-row">
                        <span class="log-label">耗时</span>
                        <span class="log-value">{{ log.duration }} ms</span>
                    </div>
                    <div class="log-row" v-if="log.requestBody">
                        <span class="log-label">请求</span>
                        <span class="log-value req">{{ log.requestBody }}</span>
                    </div>
                    <div class="log-row" v-if="log.responseBody">
                        <span class="log-label">响应</span>
                        <span class="log-value resp">{{ log.responseBody }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="bottom-nav">
            <div class="nav-item" @click="goToFeed">
                <span class="nav-icon">🏠</span>
                <span class="nav-text">首页</span>
            </div>
            <div class="nav-item" @click="goToPublish">
                <span class="nav-icon">➕</span>
                <span class="nav-text">发布</span>
            </div>
            <div class="nav-item active">
                <span class="nav-icon">📜</span>
                <span class="nav-text">日志</span>
            </div>
            <div class="nav-item" @click="goToProfile">
                <span class="nav-icon">👤</span>
                <span class="nav-text">我的</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'LogScreen',
    data() {
        return {
            logs: [],
            metrics: null
        }
    },
    created() {
        this.fetchMetrics()
        this.fetchLogs()
        this.timer = setInterval(() => {
            this.fetchMetrics()
            this.fetchLogs()
        }, 5000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    methods: {
        async fetchLogs() {
            try {
                const res = await fetch('/douyin/monitor/logs')
                this.logs = await res.json()
            } catch (e) {
                this.logs = []
            }
        },
        async fetchMetrics() {
            try {
                const res = await fetch('/douyin/monitor/metrics')
                this.metrics = await res.json()
            } catch (e) {
                this.metrics = null
            }
        },
        statusClass(status) {
            if (status >= 500) return 'status-5xx'
            if (status >= 400) return 'status-4xx'
            if (status >= 200) return 'status-2xx'
            return ''
        },
        statusBarWidth(k) {
            if (!this.metrics) return '0%'
            const total = Object.values(this.metrics.statusDistribution).reduce((a, b) => a + b, 0)
            if (!total) return '0%'
            return ((this.metrics.statusDistribution[k] / total) * 100).toFixed(1) + '%'
        },
            // 导航方法
    goToFeed() {
      this.$router.push('/feed')
    },
    goToPublish() { this.$router.push('/publish') },
    goToProfile() { this.$router.push('/profile') },
    },
    filters: {
        int(v) {
            return Math.round(Number(v) || 0)
        },
        float2(v) {
            return (Number(v) || 0).toFixed(2)
        }
    }
}
</script>

<style scoped>
.log-container {
    width: 100%;
    min-height: 100vh;
    background: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding-bottom: 60px;
}

.header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    background: rgba(0,0,0,0.8);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header h1 {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}

.back-button {
    font-size: 16px;
    cursor: pointer;
    color: #fff;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s;
}

.back-button:hover {
    background: rgba(255,255,255,0.1);
}

.metrics-area {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 12px 0 12px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.metric-item {
    flex: 1 1 30%;
    min-width: 100px;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 12px 10px;
    text-align: center;
    margin-bottom: 6px;
}

.metric-title {
    font-size: 13px;
    color: #ffb3e6;
    margin-bottom: 4px;
}

.metric-value {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.metric-item.status {
    flex: 1 1 100%;
    min-width: 0;
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}

.status-bars {
    margin-top: 2px;
}

.status-bar {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.status-label {
    font-size: 12px;
    width: 32px;
    text-align: right;
    margin-right: 6px;
    font-weight: 600;
}

.status-2xx { color: #4caf50; }
.status-4xx { color: #ff9800; }
.status-5xx { color: #f44336; }

.status-bar-bg {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    margin: 0 6px;
    overflow: hidden;
}

.status-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s;
}
.status-bar-fill.status-2xx { background: linear-gradient(90deg,#4caf50,#81c784);}
.status-bar-fill.status-4xx { background: linear-gradient(90deg,#ff9800,#ffd54f);}
.status-bar-fill.status-5xx { background: linear-gradient(90deg,#f44336,#e57373);}

.status-count {
    font-size: 12px;
    min-width: 24px;
    text-align: left;
}

.logs-area {
    flex: 1;
    padding: 12px 8px 0 8px;
    overflow-y: auto;
}

.empty-tip {
    text-align: center;
    color: #aaa;
    margin-top: 40px;
    font-size: 15px;
}

.log-card {
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    margin-bottom: 14px;
    padding: 12px 10px 8px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    font-size: 14px;
    word-break: break-all;
}

.log-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.log-method {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    background: #222;
    color: #fff;
    text-transform: uppercase;
}
.method-GET { background: #4caf50; color: #fff; }
.method-POST { background: #2196f3; color: #fff; }
.method-PUT { background: #ff9800; color: #fff; }
.method-DELETE { background: #f44336; color: #fff; }

.log-path {
    flex: 1;
    font-size: 13px;
    color: #fff;
    font-weight: 500;
}

.log-status {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    margin-left: 2px;
}
.status-2xx { background: #4caf50; color: #fff; }
.status-4xx { background: #ff9800; color: #fff; }
.status-5xx { background: #f44336; color: #fff; }

.log-time {
    font-size: 12px;
    color: #aaa;
    margin-left: 4px;
}

.log-body {
    margin-left: 2px;
}

.log-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 3px;
}

.log-label {
    min-width: 38px;
    font-size: 12px;
    color: #ffb3e6;
    margin-right: 5px;
}

.log-value {
    flex: 1;
    font-size: 13px;
    color: #fff;
    word-break: break-all;
}

.log-value.req {
    color: #90caf9;
}
.log-value.resp {
    color: #a5d6a7;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
    max-width: 375px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    transition: all 0.3s;
    padding: 6px 12px;
    min-width: 60px;
    text-align: center;
}

.nav-item:hover {
    color: white;
    transform: translateY(-1px);
}

.nav-item.active {
    color: #ff2d55;
}

.nav-icon {
    font-size: 18px;
    margin-bottom: 3px;
    line-height: 1;
}

.nav-text {
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
}

@media (max-width: 480px) {
    .metrics-area {
        gap: 7px;
        padding: 10px 4px 0 4px;
    }
    .metric-item {
        padding: 8px 4px;
        font-size: 13px;
    }
    .logs-area {
        padding: 7px 2px 0 2px;
    }
    .log-card {
        padding: 8px 5px 6px 7px;
        font-size: 13px;
    }
    .bottom-nav {
        height: 50px;
        padding: 0 5px;
    }
    .nav-item {
        padding: 4px 6px;
        min-width: 45px;
    }
    .nav-icon {
        font-size: 16px;
        margin-bottom: 2px;
    }
    .nav-text {
        font-size: 9px;
    }
}
</style></template>